.realtime-overview-container {
  display: flex;

  .left-panel {
    height: calc(100vh - 90px);
    width: 380px;
    margin: 5px;
    overflow: hidden;

    .left-panel-top {
      height: 180px;
      display: flex;

      .content {
        height: 90px;
        color: #ffffff;
        position: relative;

        div:nth-child(1) {
          font-size: 12px;
          position: absolute;
          top: 24px;
          left: 28px;
        }

        div:nth-child(2) {
          font-size: 18px;
          position: absolute;
          top: 47px;
          left: 28px;
        }

        div:nth-child(3) {
          font-size: 12px;
          position: absolute;
          top: 101px;
          left: 28px;
        }

        div:nth-child(4) {
          font-size: 18px;
          position: absolute;
          top: 124px;
          left: 28px;
        }
      }

      .l-wrap {
        flex: 1;
        background: url("../../../../assets/images/realtime-control/total-bg-1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .r-wrap {
        flex: 1;
        background: url("../../../../assets/images/realtime-control/total-bg-2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }

    .left-panel-center {
      .card:nth-child(0) {
        margin: 0 10px 0 10px;
      }

      .card {
        flex: 1;
        position: relative;
        background: #fff;
        margin: 0 10px 10px 10px;
        height: 220px;

        .card-title {
          color: #fff;
          position: absolute;
          top: 5px;
          right: -11px;
          width: 160px;
          height: 50px;
          line-height: 44px;
          font-weight: bold;
          display: inline-block;
          text-align: center;
          background-size: 100% 100%;
          background: url("../../../../assets/images/statistics/BG.png") no-repeat center;
        }

        .chart {
          position: absolute;
          top: 30px;
          left: 0;
          right: 0;
          bottom: 0;
          width: 100%;
        }

      }
    }
  }

  .center-panel {
    height: calc(100vh - 95px);
    position: relative;
    flex: 1;
    margin: 10px 0 5px 0;
    background: url("../../../../assets/images/realtime-control/zx-map-bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .right-panel {
    width: 640px;
    height: calc(100vh - 100px);
    margin-top: 10px;

    .card {
      background: #fff;
      margin: 0 10px 10px 10px;

      .title-wrap {
        height: 46px;
        line-height: 46px;
        position: relative;

        .text {
          margin-left: 20px;
          font-size: 14px;
          font-weight: bold;
        }

        .button {
          width: 105px;
          height: 46px;
          position: absolute;
          top: 3px;
          right: -8px;
          font-weight: bold;
          color: #fff;
          text-align: center;
          display: inline-block;
          background-size: 100% 100%;
          background: url("../../../../assets/images/realtime-control/jinru-btn-bg.png") no-repeat center;
        }
      }

      .table-wrap {
        margin: 10px;

        ::ng-deep table > .ant-table-thead > tr > th {
          padding: 4px 5px;
        }
        ::ng-deep  table > .ant-table-tbody > tr > td{
          padding: 4px 5px;
        }

      }


    }

  }


}
